
<template>
  <div class="app-main">
    <div class="Department-container">
      <!--:expand-on-click-node="false" 点击树不可以折叠，只有点击折叠展开图标才可以 -->
      <el-tree :data="dataArr" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
        <template v-slot="{ data }">
          <el-row style="width:100%">
            <el-col :span="20"><div>{{ data.name }}</div></el-col>
            <el-col :span="4">
              <div class="spans">
                <!--  管理员   -->
                <span class="left-span">{{ data.managerName }}</span>
                <!--  操作  -->
                <span class="right-drop">
                  <!-- 下拉框 取element官网找  -->
                  <!-- 就是一个组件的 自定义事件，既要传递 默认的参数又要传递自定义参数，就需要通过$event来 传递默认的参数 -->
                  <el-dropdown @command="handleCommand($event,data.id)">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <!-- 正常思维来说，点击事件，是给下面3个div分别绑定一个 @click事件  -->
                      <!-- 我在工作里面，有了一些优化的手段，减少事件的绑定 -->
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!--:show-dialog.sync="showDialog" -->
    <!-- 点击弹窗 需要进行父子通信 把点击出现弹窗传递到封装的弹框里面去-->
    <!-- 使用了sync修饰符，可以监听子组件传过来的 update:属性名的事件，直接将父组件的值进行修改 -->
    <!-- :department-list="DepartmentList" -->
    <!-- 通过父向子传值，给子组件做业务校验来使用，尽量不用重新发请求 要有优化的思维，减少http请求的个数，减轻服务器的压力 -->
    <!-- :current-id="currentId" -->
    <!--新增部门发送ajax请求 但是子组件的form只有4个值 单发送ajax需要五个值(最后一个是id) 所以 通过父向子传值 把id传递过去-->
    <!--  @add-success="companyDepartmen"  -->
    <!-- 子传递方法给父组件 调用 companyDepartmen 方法 用于重新渲染我们的数据列表-->
    <!--  :is-edit="isEdit" -->
    <!-- 声明一个变量 isEdit 来监控点击的是编辑按钮 再通过父传子 把false或者true传递给子组件 从而控制弹框上的文字 -->
    <!-- ref="addeditRef" 父组件访问子组件的实例对象 用于调用子组件里面获取编辑列表详情的函数 -->
    <AddEdit
      ref="addeditRef"
      :show-dialog.sync="showDialog"
      :department-list="DepartmentList"
      :current-id="currentId"
      :is-edit.sync="isEdit"
      @add-success="companyDepartmen"
    />
  </div>
</template>

<script>
import { companyDepartmentRequest, DeleteDepartmentRequest } from '@/api/department'
import { transListToTreeData } from '@/utils'
import AddEdit from '@/views/department/components/AddEdit.vue'
export default {
  name: 'Department',
  // 注册局部组件
  components: {
    AddEdit
  },
  data() {
    return {
      dataArr: [],
      DepartmentList: [],
      /* data_list: [{
        label: '传智教育',
        name: '管理员',
        children: [{
          label: '总裁办',
          name: '管理员'
        },
        { label: '行政部',
          name: '文吉星' },
        { label: '人事部',
          name: '周乐天',
          children: [{
            label: '财务核算部',
            name: '吕勇锐'
          }, {
            label: '税务管理部',
            name: '巴思慧'
          }, {
            label: '薪资管理部',
            name: '罗晓晓'
          }] },
        { label: '财务部',
          name: '巴思慧',
          children: [{
            label: 'PHP研发部',
            name: '袁永安'
          }] }, {
          label: '技术部',
          name: '罗英卓'
        }, { label: '运营部',
          name: '孙 财',
          children: [{
            label: '上海事业部',
            name: '乔 海'
          }, {
            label: '北京事业部',
            name: '濯光明'
          }] }, {
          label: '市场部',
          name: '董暠空'
        }]
      }], */
      defaultProps: {
        children: 'children',
        label: 'label',
        name: 'name'
      },
      // 默认弹窗关闭
      showDialog: false,
      // 声明一个id属性 用于传递给子组件
      currentId: '',
      // 声明一个变量 isEdit 来监控点击的是编辑按钮 再通过父传子 把false或者true传递给子组件 从而控制弹框上的文字
      isEdit: false
    }
  },
  // 使用 created 函数 调用 获取部门列表的axios
  created() {
    this.companyDepartmen()
  },
  methods: {
    async companyDepartmen() {
      // 封装 发送axios获取部门数据
      const res = await companyDepartmentRequest()
      // console.log(res.data)
      this.dataArr = res.data
      // 声明一个空数组接收部门的数据 然后传递 给子组件AddEdit 用于校验添加的部门信息
      this.DepartmentList = res.data
      // 调用递归方法
      this.dataArr = transListToTreeData(res.data, 0)
    },
    // 注册点击事件
    handleCommand(item, id) {
      console.log(item, id)
      // 在函数里面将我们的data上面的数据赋值为 页面上当前点击部门的id
      this.currentId = id
      if (item === 'add') {
        // 新增 开启弹框
        this.showDialog = true
        // 监控点击的是编辑按钮为false
        this.isEdit = false
      } else if (item === 'delete') {
        // 删除 直接去element组件里面下载一个模板 MessageBox 弹框
        this.$confirm('是否要删除本条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 执行删除的axios代码
          await DeleteDepartmentRequest(id)
          // 重新渲染页面  调用 获取部门列表的axios
          this.companyDepartmen()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        // 编辑按钮
        console.log('11编辑')
        // 编辑 开启弹框
        this.showDialog = true
        // 监控点击的是编辑按钮为true
        this.isEdit = true
        // 调用子组件里面的axios函数 但是要考虑生命周期的执行顺序 父bc ->父c --> 父bm -> 子的四个函数 --> 父mounted
        // 下面函数不能直接调用? 因为下面函数需要一个props，那个值需要等 子组件挂载了以后，才会有值
        // 方式一 还有另外一种方式通过监听器来做
        /* this.$nextTick(() => {
          this.$refs.addeditRef.getCompanyDepartment()
        }) */
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  background:  #f5f6f8;
  .Department-container{
  padding: 30px 140px;
  font-size: 14px;
  background: #fff;
  color: #606266
}
.spans {
  display: flex;
  justify-content:space-between;
}
 .left-span {
  margin:0 10px;
}
.right-drop {
  margin:0 10px;
}
}

</style>
